<template>
  <div class="all" ref="ActiveYear6">
    <div class="bg" v-if="reportSixthJson">
      <LImage class="img-bg" :src="Config.img('2201_bg.png')"></LImage>
      <div class="allab">
        <LImage class="img-stars" :src="Config.img('2201_stars.png')"></LImage>
      </div>
      <LImage class="img-moon" :src="Config.img('2201_moon.png')"></LImage>
      <LImage class="img-spot-right" :src="Config.img('2201_right_spot.png')"></LImage>
      <LImage class="img-log" :src="Config.img('2201_page6_logo.png')"></LImage>
      <LImage class="img-spot-left" :src="Config.img('2201_left_spot.png')"></LImage>
      
      <div class="height40"></div>
      <template v-if="reportSixthJson.openFollowNum < 5">
        <text class="font30 text1">{{'你很少开启跟单，习惯闷声发大财！'}}</text>

        <div class="height40"></div>
        <richtext class="richtext" :style="{'background-color':stylek}">
          <span class="font30 text1">{{'你在'}}</span>
          <span class="font52 text-yellow">{{reportSixthJson.strategyMap.startTimeM}}</span>
          <span class="font30 text1">{{'月'}}</span>
          <span class="font52 text-yellow">{{reportSixthJson.strategyMap.startTimeD}}</span>
          <span class="font30 text1">{{'日'}}</span>
        </richtext>

        <div class="height40"></div>
        <richtext class="richtext" :style="{'background-color':stylek}">
          <span class="font30 text1">{{'开启了一个'}}</span>
          <span class="font30 text-yellow">{{reportSixthJson.strategyMap.counterCoin}}</span>
          <span class="font30 text1">{{'币种的'}}</span>
          <span class="font44 text-yellow">{{reportSixthJson.strategyMap.strategyName}}</span>
          <span class="font30 text1">{{'策略'}}</span>
        </richtext>

        <div class="height40"></div>
        <richtext class="richtext" :style="{'background-color':stylek}">
          <span class="font30 text1">{{'在'}}</span>
          <span class="font30 text-yellow">{{reportSixthJson.strategyMap.endTimeMD}}</span>
          <span class="font30 text1">{{'时间盈利达到'}}</span>
          <span class="font52 text-yellow">{{reportSixthJson.strategyMap.realEarningsRate}}</span>
          <span class="font30 text-yellow">{{'%'}}</span>
        </richtext>

        <div class="height40"></div>
        <text class="font30 text-yellow">{{'是时候展示真正的技术了！'}}</text>
      </template>
      <template v-else>
        <richtext class="richtext" :style="{'background-color':stylek}">
          <span class="font30 text1">{{'你热爱分享策略，是交易'}}</span>
          <span class="font44 text-yellow">{{'“老司机”'}}</span>
        </richtext>

        <div class="height40"></div>
        <richtext class="richtext" :style="{'background-color':stylek}">
          <span class="font30 text1">{{'一句'}}</span>
          <span class="font44 text-yellow">{{'“上车”'}}</span>
          <span class="font30 text1">{{'就有'}}</span>
          <span class="font52 text-yellow">{{reportSixthJson.followStrategyMap.followNumber}}</span>
          <span class="font30 text1">{{'人跟单你的策略，'}}</span>
        </richtext>

        <div class="height40"></div>
        <richtext class="richtext" :style="{'background-color':stylek}">
          <span class="font30 text1">{{'跟单最高年化率达'}}</span>
          <span class="font52 text-yellow">{{reportSixthJson.followStrategyMap.strategyIncome}}</span>
          <span class="font30 text-yellow">{{'%'}}</span>
        </richtext>
      </template>
      
      <div class="height40"></div>
      <template v-if="reportSixthJson.followNum > 0">
        <richtext class="richtext" :style="{'background-color':stylek}">
          <span class="font30 text1">{{'这一年你跟单了'}}</span>
          <span class="font52 text-yellow">{{reportSixthJson.followNum}}</span>
          <span class="font30 text1">{{'次，'}}</span>
        </richtext>
        <richtext class="richtext" :style="{'background-color':stylek}">
          <span class="font44 text-yellow mb-2">{{reportSixthJson.nickName}}</span>
          <span class="font30 text1">{{'是你最关心的人'}}</span>
        </richtext>

        <div class="height40"></div>
        <text v-if="reportSixthJson.winRate > 0.5" class="font30 text-yellow">{{'跟君一次单，胜打十年工'}}</text>
        <text v-else class="font30 text-yellow">{{'跟君一次单，多打十年工'}}</text>
      </template>
      <template v-else>
        <text class="font30 text1">{{'你的人生信条一定是：'}}</text>
        <div class="height10"></div>
        <text class="font30 text-yellow">{{'走自己的路，不跟单交易'}}</text>
      </template>


      <div class="all"></div>
      <div class="but" @stopPropagation="stopPropagation" @click="otClick"></div>
    </div>
  </div>
</template>

<style src="@/_css/style.css" ></style>
<style scoped>
  .richtext {
    background-color:rgba(0, 0, 0, 0)
  }
  .yinyue {
    position: absolute;
    right: 40;
    top: 40;
    width: 60px;
    height: 60px;
  }
  .text1 {
    color: #E5F3FF;
  }
  .bg {
    overflow: hidden;
    flex: 1;
    padding-left: 70px;
    padding-right: 70px;
  }
  .allab {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    justify-content: center;
    align-items: center;
  }
  .img-bg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
  .img-stars {
    width: 719px;
    height: 766px;
  }
  .img-moon {
    position: absolute;
    top: 200;
    right: -110px;
    width: 220px;
    height: 220px;
  }
  .img-spot-left {
    position: absolute;
    bottom: 380;
    left: 10;

    width: 88px;
    height: 93px;
  }
  .img-spot-right {
    position: absolute;
    bottom: 288;
    right: 0;
    
    width: 147px;
    height: 155px;
  }
  .img-log {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 750px;
    height: 760px;
  }

  .img-text {
    width: 296px;
    height: 119px;
    margin-top: 40px;
  }
  .but {
    height: 160px;
  }
  .height120 {
    height: 120px;
  }
  .mb40 {
    margin-bottom: 40px;
  }
  .text-yellow {
    color: #F6CF54;
  }
</style>

<script>

//功能
import jconfig from "@/_js/config"; 
import jmath from "@/_js/math"; 
import jtime from "@/_js/time"; 

export default {

  props:{
    data:{
      type:Object,
      default:undefined,
    },
  },
  
  data() {
    return {
      Config: jconfig,
      data:undefined,
      reportSixthJson:undefined,
    }
  },

  /* reportSixthJson 6
    * 
    *   openFollowNum 开启跟单次数
    *   followNum 跟单次数
    *   strategyMap //开放更单少于5，展示策略
    *     startTime 开始时间
    *     endTime 结束时间
    *     strategyName 策略名称
    *     realEarnings 收益
    *     counterCoin 交易币
    *     baseCoin 本币
    * 
    * 
    *   followStrategyMap //开放更单少于5，展示策略
    *     followNumber 跟单人昵称
    *     realYearIncome 年化
    * 
    * 
    *  "reportSixthJson":{
            "openFollowNum":38,
            "followNum":0

        }
    **/
  mounted(){
    var reportSixthJson = this.data.reportSixthJson;
    reportSixthJson.winRate = jmath.chu(reportSixthJson.winCount, reportSixthJson.followNum);

    if (reportSixthJson.strategyMap) {
      reportSixthJson.strategyMap.startTimeM = jtime.getTime(reportSixthJson.strategyMap.startTime, 'M');
      reportSixthJson.strategyMap.startTimeD = jtime.getTime(reportSixthJson.strategyMap.startTime, 'd');
      reportSixthJson.strategyMap.endTimeMD = jtime.getTime(reportSixthJson.strategyMap.startTime, 'M月d日');
      reportSixthJson.strategyMap.realEarnings = jmath.xiaoshu(reportSixthJson.strategyMap.realEarnings, 2, 2);
    }
    
    this.reportSixthJson = reportSixthJson;
    setTimeout(() => {
      this.stylek = 'rgba(0, 0, 0, 0)';
      this.$forceUpdate();
    }, 1000);
    
  },

  methods:{
    /******************** 点击*/
    
    /******************** 手势*/
    stopPropagation(){
      return true;
    },

    /******************** 按钮*/
    //查看
    otClick() {
      this.$emit("ot", this.$refs.ActiveYear6, 7);
    },
  }
}
</script>
